<!DOCTYPE html>
<html lang="en">
<!-- For replacing python-for-android webview bootstrap _load.html -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading</title>
    <style>
        :root {
            --fore-color: #111;
            --back-color: #eee;
            --notice-error: rgba(255, 0, 0, 0.2);
            --font-size: 1rem;
            --line-height: 1.8em;
            --anim-time: 0.5s;
            --span: 8px;
            --span-double: calc(var(--span) * 2);
        }
        body {
            background-color: var(--back-color);
            color: var(--fore-color);
            font-size: var(--font-size);
            line-height: var(--line-height);
        }
        a:link, a:visited {
            color: #33f;
        }
        a:hover, a:active {
            color: #22f;
        }
        @media (prefers-reduced-motion) {
            body {
                transition-duration: 0ms !important;
                transition: none;
                animation-timing-function: steps(1);
                animation-duration: 0ms !important;
            }
        }
        @media (prefers-color-scheme: dark) {
            :root {
                --fore-color: #eee;
                --back-color: #333;
            }
        }
        @keyframes jump {
            0% { transform: translateY(0); }
            50% { transform: translateY(var(--font-size)); }
            100% { transform: translateY(0); }
        }
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--back-color);
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            z-index: 1;
            opacity: 1;
            transition: opacity var(--anim-time) var(--curve);
        }
        .logo {
            background-image: url('icon.svg');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            width: 80%;
            max-width: 16em;
            height: 80%;
            max-height: 16em;
            margin: 0 auto;
        }
        #loading-screen.hidden {
            opacity: 0;
        }
        #loading-screen>.dots {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        #loading-screen>.dots>span {
            display: inline-block;
            width: var(--font-size);
            height: var(--font-size);
            margin: var(--font-size);
            background-color: var(--fore-color);
            border-radius: calc(var(--font-size) / 2);
            animation: jump 1s ease 0s infinite;
        }
        #loading-screen>.dots>span:nth-child(1) { animation-delay: 0s; }
        #loading-screen>.dots>span:nth-child(2) { animation-delay: 0.3s; }
        #loading-screen>.dots>span:nth-child(3) { animation-delay: 0.6s; }

        .noscript {
            margin: var(--span-double);
            text-align: center;
            background-color: var(--notice-error);
            display: block;
        }
        a {
            transition: all var(--anim-time) ease-out;
        }
    </style>
</head>
<body>
    <div id="loading-screen">
        <div class="logo"></div>
        <div class="dots">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <noscript>
            <p class="noscript">
                <span>Please enable JavaScript!</span><br />
                <a href="jslicense.html" data-i18n="javascript-license-information"
                data-jslicense="1" >JavaScript License Information</a>
            </p>
        </noscript>
    </div>
</body>
</html>